<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>thacher update</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/css/layui.css}" media="all">
    <script th:src="@{/js/jquery-3.5.1.min.js}"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-lg8 layui-col-lg-offset2">
            <form class="layui-form" id="teacher-form" lay-filter="teacher-form">
                <div class="layui-form-item" hidden="hidden">
                    <label class="layui-form-label">ID</label>
                    <div class="layui-input-block">
                        <input type="text" name="id" id="id" autocomplete="off" lay-verify="id" hidden
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">学号</label>
                    <div class="layui-input-block">
                        <input type="text" name="studentId" id="studentId" autocomplete="off" lay-verify="studentId"
                               placeholder="请输入学号" disabled
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">班级</label>
                    <div class="layui-input-block">
                        <input type="text" name="claId" id="claId" autocomplete="off" lay-verify="claId"
                               placeholder="班级"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="name" autocomplete="off" lay-verify="name"
                               placeholder="请输入姓名"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">单选框</label>
                    <div class="layui-input-block">
                        <input type="radio" name="gender" id="man" value="0" title="男">
                        <input type="radio" name="gender" id="female" value="1" title="女">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">手机</label>
                        <div class="layui-input-inline">
                            <input type="tel" name="phone" id="phone" lay-verify="phone" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>

                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-inline">
                            <input type="text" name="email" id="email" lay-verify="email" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">学院</label>
                    <div class="layui-input-block">
                        <input type="text" name="collegeId" id="collegeId" autocomplete="off" lay-verify="collegeId"
                               placeholder="学院" disabled
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">系</label>
                    <div class="layui-input-block">
                        <input type="text" name="systemId" id="systemId" autocomplete="off" lay-verify="systemId"
                               placeholder="系" disabled
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="demo1" id="sub-btn">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

</body>
<script th:src="@{/layui.js}" src="layui.js" charset="utf-8"></script>
<script>
    var request = 'http://localhost:8080/'
    layui.use('form', function () {
        var form = layui.form;
        $(function () {
            let ID = window.sessionStorage.getItem('studentID');
            $.ajax({
                url: request + 'student/query/' + ID,
                type: 'GET',
                dataType: "JSON",
                success: function (res) {
                    if (res.code === 0) {
                        let student = res.data;
                        $("#id").val(student.id);
                        $("#claId").val(student.claId);
                        $("#studentId").val(student.studentId);
                        $("#name").val(student.name);
                        if (student.gender === 0) {
                            $("#man").prop("checked", "checked");
                        } else {
                            $("#female").prop("checked", "checked");
                        }
                        $("#email").val(student.email);
                        $("#phone").val(student.phone);
                        $("#collegeId").val(student.collegeId);
                        $("#systemId").val(student.systemId);
                        form.render();
                    }
                }
            })
        })
        // 自定义验证规则
        form.verify({
            id: function (value) {
                if (value.length < 1) {
                    return 'id不可改！';
                }
            },
            studentId: function (value) {
                if (value.length < 1) {
                    return '学号不可为空！';
                }
            },
            claId: function (value) {
                if (value.length < 1) {
                    return '班级不能为空！';
                }
            },
            name: function (value) {
                if (value.length < 1) {
                    return '姓名不能为空！';
                }
            },
            collegeId: function (value) {
                if (value.length < 1) {
                    return '学院不能为空！';
                }
            },
            systemId: function (value) {
                if (value.length < 1) {
                    return '系不能为空！'
                }
            }
        });
        form.on('select(select-nature)', function (data) {
            console.log(data.value)
            if (data.value === '0') {
                $("#number").val(-1).prop("disabled", "disabled");
                $("#cla").removeAttr('disabled');
            } else {
                $("#number").val(0).removeAttr('disabled');
                $("#cla").val('').prop('disabled', 'disabled');
            }
            form.render();
        });
        // 监听提交
        form.on('submit(demo1)', function () {
            // submit 提交事件
            let studentId = $("#studentId").val();
            let serialize = $("#teacher-form").serialize();
            serialize = "studentId=" + studentId + "&" + serialize;
            $.ajax({
                url: request + '/student/update',
                type: "PUT",
                data: serialize,
                dataType: "JSON",
                success: function (JSONResult) {
                    if (JSONResult.code === 0) {
                        layer.msg("修改成功！");
                    } else {
                        layer.msg("修改失败！");
                    }
                }
            });
            return false;
        });
    });
</script>
</html>